<template>
	<view class="login">
		<view class="top">
			<image class="im-1" src="../../static/login/logo-1.png" mode=""></image>
		</view>
		<view class="top-2">
			<view class="top-2-1">
				<view class="top1">
					<text>欢迎:</text>
				</view>
				<view class="top2">
					<text>登录蜗牛金融!</text>
				</view>
				<view class="top3">
					<input v-model="user.name" class="inp-1" type="text" value="" placeholder="输入账号" />
				</view>
				<view :class="{show:is}" style="color: #ED1C24;">*账号格式不正确</view>
				<view class="top3">
					<input v-model="user.psw" class="inp-1" type="password" value="" placeholder="输入密码" />
				</view>
				<view :class="{show:is2}" style="color: #ED1C24;">*密码不正确</view>
				<view class="top2">
					<button @click="login" class="button" type="default">登录</button>
					<u-toast ref="uToast" />
				</view>
				<view class="top1">
					<view class="wz-1">
						<navigator url="../Register/Register">注册账号</navigator>
					</view>
					<view class="wz-2">
						<navigator url="#">忘记密码？</navigator>
					</view>
				</view>
			</view>
			<view class="top-2-2">
				<navigator url="./Mobile">其他登陆方式</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"user"
	);
	export default {

		data() {
			return {
				user: {
					name: '',
					psw: ''
				},
				is: true,
				is2: true
			}


		},
		methods: {
			...mapMutations(['setUserInfo']),
			...mapActions(['nameLogon']),
			async login() {
				let reg1 = /^1[3-9]\d{9}$/;
				let psw = /^[0-9a-zA-Z]{6,18}$/
				let a = reg1.test(this.user.name)
				let b = psw.test(this.user.psw)

				if (a || b) {
					this.is = true
					this.is2 = true
					let result = await this.nameLogon({
						userName: this.user.name,
						passWord: this.user.psw
					})
					// console.log(result.code);
					if (result.code == 200) {
						// 存入token
						uni.setStorage({
							key: 'token',
							data: result.data.token
						})
						// 存入用户id
						uni.setStorage({
							key: 'id',
							data: result.data.userId
						})
						// 将获取到的用户信息存储到状态机
						this.setUserInfo({
							...result.data
						})
						this.$refs.uToast.show({
								title: '登录成功',
								type: 'success',
							},
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 1000)
						)
					} else {
						this.$refs.uToast.show({
							title: '登录失败',
							type: 'error',
						}, )
					}

				} else {
					this.is = false
					this.is2 = false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 750rpx;
		background-color: #fefefe;
		position: relative;

		.top {
			position: relative;
			width: 100%;

			.im-1 {
				position: absolute;
				width: 100%;
				height: 500rpx;
				z-index: -1;
			}

		}

		.top-2 {
			top: 215rpx;
			position: absolute;
			width: 100%;
			height: 700rpx;
			padding: 0rpx 40rpx;

			.top-2-1 {

				padding: 0rpx 40rpx;
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
				background-color: #ffffff;

				.top1 {
					margin-top: 30rpx;
					line-height: 50rpx;
					font-size: 32rpx;
					width: 100%;
					height: 50rpx;
					display: flex;
					justify-content: space-between;

					.wz-1 {
						color: #3775f6;
					}

					.wz-2 {
						color: #cacaca;
					}
				}

				.top2 {
					line-height: 80rpx;
					font-size: 50rpx;
					font-weight: 800;
					width: 100%;
					height: 100rpx;

					.button {
						margin-top: 30rpx;
						width: 100%;
						line-height: 110rpx;
						height: 110rpx;
						color: #ffffff;
						background-color: #3775f6;
					}
				}

				.top3 {
					margin-top: 30rpx;
					width: 100%;
					height: 110rpx;

					.inp-1 {
						padding-left: 20rpx;
						border-radius: 15rpx;
						width: 100%;
						height: 100%;
						font-size: 28rpx;
						background-color: #f5f5f5;
					}
				}


			}

			.top-2-2 {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #bfbfbf;
			}
		}
	}

	.show {
		display: none;
	}

	.show2 {
		display: none;
	}
</style>
